<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="js/datetimepicker/jquery.datetimepicker.css" />
	</head>

	<body>
		<div class="container">
			<h2 class="page-header">修改课程信息</h2>

			<form id="form1" class="form-horizontal" enctype="multipart/form-data">
				<div class="form-group">
					<label for="" class="col-sm-2" style="color: white;">选择图片</label>
					<div class="col-sm-8">
						<input type="file" id="sourseImg" name="sourseImg" placeholder="请选择图片文件" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">课程名称</label>
					<div class="col-sm-8">
						<input type="text" id="sourseName" name="sourseName" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">职业</label>
					<div class="col-sm-8">
						<select name="job.jobId" id="jobId" class="form-control">
							<option value="">请选择课程所属职业</option>													
						</select>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">简介</label>
					<div class="col-sm-8">
						<textarea id="sourseIntro" name="sourseIntro" class="form-control"></textarea>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-8">
						<input type="hidden" id="sourseId" name="sourseId" />
						<input type="button" value="修改" class="btn btn-success" id="updateBtn" />
						<input type="button" value="取消" class="btn btn-warning" onclick="window.parent.layer.closeAll()" />
					</div>
				</div>
			</form>
		</div>
		<!-- 预览图片  -->
		<img src="" id="previewImg" class="img-responsive" />

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
		<script type="text/javascript" src="js/layer/layer.js"></script>
		<script type="text/javascript" src="js/datetimepicker/jquery.datetimepicker.js"></script>
		<script type="text/javascript" src="js/param.js"></script>
		<script>
			$(function() {
				//统一设置ajax同步
				$.ajaxSetup({
					async: false
				});
	
				//动态生成职务列表框
				$.ajax({
						url: baseUrl + '/job/query',
						type: 'GET',
						dataType: 'json'
					})
					.done(function(data) {
						$.each(data, function(index, item) {
							var opt = '<option value="' + item.jobId + '">' + item.jobName + '</option>';
							$('#jobId').append(opt);
						});
					})
					.fail(function(xhr, status, text) {
						layer.msg('职务列表请求失败');
					});
	
				//获得员工信息
				var sourseId = getParam('sourseId');
	
				//获得员工数据的数据模型中数组下标
				var index = getParam('index');
	
				$.getJSON(baseUrl + '/sourse/get', {
						sourseId: sourseId
					}, function(data) {
						$('#previewImg').attr('src', data.sourseImg);
//						$('#sourseImg').val(data.sourseImg);
						$('#sourseName').val(data.sourseName);
						$('#jobId').val(data.job.jobId);
						$('#sourseIntro').val(data.sourseIntro);
						$('#sourseId').val(data.sourseId);
	
					})
					.error(function() {
						layer.msg('网络请求失败');
					});
					
					$('#sourseImg').change(function(e) {

						var img = this.files[0];
						//					alert(file.type);
						//判断文件是否是图片
						if (img.type.match(/image/) == null) {
							//用户选择的不是一个图片文件
							layer.msg('请选择一个图片文件');
							//清空文件域的内容
							this.value = '';
							return false;
						}
	
						//判断图片的大小，图片不允许超过1M
						if (img.size > 1 * 1024 * 1024) {
							layer.msg('图片的大小不能超过1M');
							//清空文件域的内容
							this.value = '';
							return false;
						}
	
					});
				//表单验证函数
//				function checkForm() {
//					
//					var files = $('#sourseImg').get(0).files;
//					if (files.length == 0) {
//						layer.msg('请选择上传图片作为的课程视频封面');
//						$('#sourseImg').focus();
//						return false;
//					}
//	
//					//职务
//					var jobId = $('#jobId');
//	
//					if (jobId.val() == '') {
//						layer.msg('请选择一个职务');
//						jobId.focus();
//						return false;
//					}
//	
//					//员工简介（最多600字）
//					return true;
//				}
	
				//增加按钮单击事件
				$('#updateBtn').click(function() {
					//调用表单验证
//					if (!checkForm())
//						return;
						
					var img = $('#sourseImg').get(0).files[0];
					// 创建FormData对象（表单数据）
					var formData = new FormData();
					// 添加数据字段到FormData
					formData.append('sourseImg', img);
					// 添加数据字段到FormData
					formData.append('sourseName', $('#sourseName').val());
					// 添加数据字段到FormData
					formData.append('jobId', $('#jobId').val());
					// 添加数据字段到FormData
					formData.append('sourseId', $('#sourseId').val());
					// 添加数据字段到FormData
					formData.append('sourseIntro', $('#sourseIntro').val());
					
					$.ajax({
						url: baseUrl + '/sourse/update',
						type: 'POST',
						data: formData,
						processData: false, //一定设置false
						contentType: false, //一定设置false
						//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
						　　　xhr: function() {　　　　　　
							var xhr = $.ajaxSettings.xhr();
	
							　　　　　　
							if (onprogress && xhr.upload) {　　　　　　　　
								xhr.upload.addEventListener("progress", onprogress, false);　　　　　　　　
								return xhr;　　　　　　
							}　　　
						}
					})
					.done(function(data) {
						layer.msg("修改课程信息成功！");
						//修改前端员工数据
						var sourse = window.parent.vue.sourseData[index];

						sourse.sourseId = sourseId;
						sourse.sourseImg = img;
						sourse.sourseName = $('#sourseName').val();
						sourse.sourseIntro = $('#sourseIntro').val();
						sourse.job.jobName = $('#jobId option:selected').text();
						setTimeout(function() {
							window.parent.layer.closeAll();
						}, 500);
					})
					.fail(function(xhr) {
						layer.msg("修改课程信息失败，" + xhr.status);
					});
					alert("触发");
	
					//ajax请求
//					var params = $('#form1').serialize();
	
//					$.post(baseUrl + '/sourse/update', formData, function(data) {
//							layer.msg('修改课程信息成功');
//	
//							//修改前端员工数据
//							var sourse = window.parent.vue.sourseData[index];
//	
//							sourse.sourseId = sourseId;
//							sourse.sourseName = $('#sourseName').val();
//							sourse.sourseIntro = $('#sourseIntro').val();
//							sourse.job.jobName = $('#jobId option:selected').text();
//	
//							setTimeout(function() {
//								window.parent.layer.closeAll();
//							}, 500);
//						})
//						.error(function() {
//							layer.msg('修改课程信息请求失败');
//						});
	
				});
			});
		</script>

	</body>

</html>